import React, { useEffect, useState } from "react";
import {
  getBannerApi,
  getHomeListById,
  getHomeTitle,
} from "../../../api/homeApi";
import { useRequest } from "ahooks";
import style from "./style.module.scss";
import { WDHeader } from "../../../components";
import { Swiper } from "react-vant";
import { WdTitle } from "../../../components/wd-title";
import { WDListItem } from "../../../components/wd-list-item";
import { useNavigate } from "react-router-dom";
import { getDiseaseTitle } from "../../../api/diseaseApi";
import { DiseaseTitleState } from "../../disease/index";

interface BannerState {
  imageUrl: string;
  jumpUrl: string;
  rank: number;
  title: string;
}
interface TitleState {
  id: number;
  sort: number;
  name: string;
}

export interface ContentState {
  id: number;
  plateId: number;
  releaseTime: number;
  source: string;
  thumbnail: string[];
  title: string;
}

const Index: React.FC = () => {
  const navigate = useNavigate();
  // 获取轮播
  const { data: bannerData = [] } = useRequest(async () => {
    return (await getBannerApi()).result as BannerState[];
  });
  // 标题当前选中的id
  const [titleID, setTitleID] = useState(0);
  // 获取标题
  const { data: titlesData = [] } = useRequest(async () => {
    const data = await getHomeTitle();
    console.log("titlesData", data);
    // 设置默认id   异步更新
    setTitleID(data.result[0].id);
    return data.result as TitleState[];
  });

  // 列表内容
  const { data: contentData = [], run } = useRequest(
    async () => {
      const data = await getHomeListById({
        plateId: titleID,
        page: 1,
        count: 5,
      });
      console.log("contentData", data);
      // 分析 thumbnail 是一个图片的字符串集合 通过; 分割
      // 为了方便， 转为熟组
      data.result.forEach((v: any) => {
        v.thumbnail = v.thumbnail.split(";");
      });
      return data.result as ContentState[];
    },
    { manual: true }
  );

  // 咨询数据
  const { data: diseaseData = [] } = useRequest(async () => {
    const resp = await getDiseaseTitle();
    console.log("diseaseData", resp.result);
    return resp.result as DiseaseTitleState[];
  });

  useEffect(() => {
    // 首次渲染执行 以及 titleID 变化之行
    if (titleID) run();
  }, [titleID]);

  return (
    <div>
      <WDHeader showSearch={true}></WDHeader>
      <WDHeader showSearch={false}></WDHeader>
      <WDHeader showSearch={false} title="首页"></WDHeader>
      {/* 轮播 */}
      {bannerData.length && (
        <Swiper>
          {bannerData.map((v) => {
            return (
              <Swiper.Item key={v.rank}>
                <img src={v.imageUrl} alt="" width="100%" height={200} />
              </Swiper.Item>
            );
          })}
        </Swiper>
      )}
      {/* 标题 */}
      <WdTitle title="知识宝典">
        <div className={style.know}>
          <div className={style.left}>
            <span>常见病症</span>
            {/* <img src={leftUrl} alt="" /> */}
          </div>
          <div className={style.right}>
            <span>常见药品</span>
            {/* <img src={rightUrl} alt="" /> */}
          </div>
        </div>
      </WdTitle>
      <WdTitle title="问诊咨询">
        <div></div>
    </WdTitle>
      <WdTitle title="健康评测">
        <div className={style.heathy}>
          {diseaseData.map((v) => {
            return (
              <div
                key={v.id}
                className={style.item}
                onClick={() => navigate("/disease?id=" + v.id)}
              >
                <img src={v.pic} alt="" className={style.img}/>
                <span>{v.departmentName}</span>
              </div>
            );
          })}
        </div>
      </WdTitle>
      <WdTitle title="健康咨询">
        <div>
          <div className={style.title}>
            {titlesData.map((v) => {
              return (
                <span
                  key={v.id}
                  className={v.id === titleID ? style.active : ""}
                  onClick={() => setTitleID(v.id)}
                >
                  {v.name}
                </span>
              );
            })}
          </div>
          <div className={style.content}>
            {contentData.map((v) => {
              return (
                <WDListItem
                  key={v.id}
                  v={v}
                  onClick={() => navigate("/home/list/" + v.id)}
                ></WDListItem>
              );
            })}
          </div>
        </div>
      </WdTitle>
    </div>
  );
};

export default Index;
